{extend name="../../public/admin"}
{block name="title"}数据字典{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/admin/css/index.dictionaries.css">
<link rel="stylesheet" href="__PUBLIC__/public/off/ios6switch.css"/>
{/block}

{block name="body"}
<div id="container">
    <div class="col-xs-6 col-xs-offset-3">

    </div>

    <div class="clearfix"></div>
    <div style="height: 20px;"></div>
    <div class="table-responsive" id="header">
        <table class="table table-bordered table-hover" v-cloak>
           <thead>
               <tr class="active">
                   <th colspan="7" class="text-left">
                       <a href="javascript:;" @click="addData()" class="btn btn-info btn-sm"><i class="fa fa-plus"></i> {:lang('添加')}</a>
                       <span class="fa-pull-right">总 <strong>{{list.length}}</strong> 条</span>
                   </th>
               </tr>
               <tr class="active">
                   <th width="5%">编号</th>
                   <th width="10%">名称</th>
                   <th width="10%">页面地址</th>
                   <th width="20%">排序</th>
                   <th width="20%">创建时间</th>
                   <th width="10%" class="text-center">操做</th>
               </tr>
           </thead>
            <tbody>
            <template v-for="(key,index) in list">
                <tr class="active">
                    <th colspan="7">{{key[0].parentname}}</th>
                </tr>
                <tr v-for="(key2,index2) in list[index]">
                    <td>{{index2+1}}</td>
                    <td><input type="text" v-model="key2.navname" @change="up('name',key2.navname,key2.navid)"></td>
                    <td><input type="text" v-model="key2.navurl" @change="up('url',key2.navurl,key2.navid)"></td>
                    <td><input type="text" v-model="key2.navsortCode" @change="up('sortCode',key2.navsortCode,key2.navid)"></td>
                    <td>{{key2.navaddtime}}</td>
                    <td class="text-center">
                        <a href="javascript:;" @click="de(key2.navid,index2,index)" class="btn btn-xs" title="删除"><i class="fa fa-trash-o"></i></a>

                        <!--<a href="javascript:;" v-if="key2.navshow==0" @click="sh(key2.navid,1,index2,index)" class="btn btn-xs" title="隐藏导航">
                            <i class="fa fa-times"></i>
                        </a>
                        <a href="javascript:;" v-else @click="sh(key2.navid,0,index2,index)" class="btn btn-xs" title="显示导航" >
                            <i class="fa fa-check"></i>
                        </a>-->
                        <input type="checkbox" class="checkboxset" :checked="key2.navshow==0" @change="sh(key2.navid,$($event.currentTarget),index2,index)">
                    </td>
                </tr>
            </template>
            </tbody>

        </table>
        <div class="alert alert-info">
            <h5><strong>教程：</strong></h5>
            分类在“分类导航”里面操作
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script language="javascript" src="__PUBLIC__/public/off/ios6switch.min.js"></script>
<script>
    var app = new Vue({
        el:'#header',
        data:{
            list:[]
        }
    });

    get_data();
    //获取数据
    function get_data() {
        $.get(DINDEX+'/nav.html',function (da) {
            app.list = da;
            app.$nextTick(function () {
                $('.checkboxset').ios6switch({
                    size:13,
                    switchoffText:'显',
                    switchonText:'隐',
                });
            });

        });
    }

    //内容改变事件 (字段名称，内容，id)
    app.up = (name,val,id)=>{
        $.post(DINDEX+'/update_nav',{name:name,val:val,id:id},function (da) {
            if(da){
                layer.msg('修改成功',{icon:1,offset:'rb'});
            }
            else {
                layer.msg('修改失败',{icon:2,offset:'rb'});
                get_data();
            }
        });
    }
    /**
     *
     * @param id id
     * @param val 内容
     * @param index 自坐标
     * @param i 上级坐标
     */
    app.sh =(id,val,index,i)=>{
        val = val.is(':checked')== false ?1:0;
        console.log(val);
        app.list[i][index].navshow = val;
        $.post(DINDEX+'/update_nav',{name:'show',val:val,id:id},function (da) {
            if(da){
                layer.msg('修改成功',{icon:1,offset:'rb'});
            }
            else {
                layer.msg('修改失败',{icon:2,offset:'rb'});
                get_data();
            }
        });
    }

    //删除内容 id 自己的坐标 父坐标
    app.de = (id,index,i)=>{
        var this_index = layer.confirm('确定要删除',{icon:0},function () {

            $.post(DINDEX+'/delete_nav',{id:id},function (da) {
                if(da){
                    layer.msg('删除成功',{icon:1,offset:'rb'});
                }
                else {
                    layer.msg('删除失败',{icon:2,offset:'rb'});
                    get_data();
                }
            });
            if(app.list[i].length != 1){
                app.list[i].splice(index,1);
            }
            else{
                app.list.splice(i,1);
            }

            layer.close(this_index);
        })

    }

    //添加内容
    app.addData=()=>{
        yeMian(DINDEX+'/add_nav',function () {
            get_data();
        });
    }

</script>
{/block}